import { Button, message } from "antd";
import { pageSalary, delSalary } from "@/api/flandre-ui/request";
import { BasicTable, useTable, BasicColumn, TableAction } from "@/components/Table";
import DetailDrawer_AddUpdate from "./components/DrawerAddUpdate";
import { useDrawer } from "@/components/Drawer";
import "./index.less";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";

export default function SalaryManagement() {
	const { t } = useTranslation();
	const en_vi = "HRMS.salaryManagement";
	const [drawer_add_update, { openDrawer: openDrawerAddUpdate }] = useDrawer();

	// Table columns definition
	const columns: BasicColumn[] = [
		{
			title: t("flandre_ui.staff_id"),
			dataIndex: "staffId",
			width: 100
		},
		{
			title: t("HRMS.leaveApproval.staffName"),
			dataIndex: "staffName",
			width: 100
		},
		{
			title: t(`${en_vi}.salaryType`),
			dataIndex: "salaryType",
			width: 150
		},
		{
			title: t(`${en_vi}.basicSalary`),
			dataIndex: "salaryBas",
			width: 150
		},
		{
			title: t(`${en_vi}.positionSalary`),
			dataIndex: "salaryPoz",
			width: 150
		},
		{
			title: t(`${en_vi}.bonus`),
			dataIndex: "salaryBonus",
			width: 150
		},
		{
			title: t(`${en_vi}.deductionAmount`),
			dataIndex: "salaryDeduct",
			width: 150
		},
		{
			title: t(`${en_vi}.amountTo`),
			dataIndex: "totalSalary",
			width: 100
		},
		{
			title: t(`${en_vi}.deductionReason`),
			dataIndex: "deductReason",
			width: 200
		},
		{
			title: t(`${en_vi}.salaryDate`),
			dataIndex: "salaryDate",
			width: 150
		},

		{
			title: t("felix_ui.action"),
			key: "actions",
			fixed: "right",
			width: 220,
			render: (_, record) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleEdit.bind(record)
						},
						{
							icon: IconEnum.DELETE,
							label: t("felix_ui.delete"),
							popConfirm: {
								title: t("common.deleteMessage"),
								placement: "left",
								confirm: handleDelete.bind(null, record)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [patServicesTable, { reload }] = useTable({
		api: pageSalary,
		columns,
		showTableSetting: false,
		showIndexColumn: false
	});

	// Edit
	const handleEdit = (record: Recordable) => {
		openDrawerAddUpdate(true, { record, action: "edit" });
	};

	// Add
	const handleAdd = () => {
		openDrawerAddUpdate(true, { action: "add" });
	};

	// Delete
	const handleDelete = async (id: any) => {
		try {
			await delSalary(id);
			message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
			reload();
		} catch (error) {
			t("viewComponents.patientInformation.deleteFailed");
		}
	};

	return (
		<div className="pageSalaries">
			<div>
				<div className="box1">
					<h1 className="title">{t(`${en_vi}.salaryManagement`)}</h1>
					<Button type="primary" onClick={handleAdd}>
						+ Add Salary
					</Button>
				</div>
				<BasicTable register={patServicesTable}></BasicTable>
			</div>
			<DetailDrawer_AddUpdate reload={reload} register={drawer_add_update}></DetailDrawer_AddUpdate>
		</div>
	);
}
